<template>
    <div>
        <el-space direction="horizontal" alignment="none">
            <el-select v-model="value" class="m-2" placeholder="全部">
                <el-option key="all" value="">全部</el-option>
                <el-option v-for="(item, index) in options" :key="'select' + index" :label="item.label"
                    :value="item.value" />
            </el-select>
            <el-input v-model="input" placeholder="请输入关键词" />
            <el-button type="primary">搜索</el-button>
            <el-button type="primary" @click="add()">添加商品</el-button>
        </el-space>
        <!-- 表格 -->
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            style="width: 100%; margin-top: 10px;" height="400">
            <el-table-column align="center" label="序号" fixed type="index" width="80" />
            <el-table-column align="center" label="藏品名称" prop="shopName" width="180" />
            <el-table-column align="center" label="藏品价格" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        ￥
                        <span style="margin-left: 10px">{{ scope.row.shopPrice }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="图片" prop="shopImg">
                <template #default="scope">
                    <el-image style="width: 100px; height: 100px;" :src="scope.row.shopImg" :preview-src-list="[scope.row.shopImg]"
                        fit="cover" preview-teleported />
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" fixed="right" width="150">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.$index, scope.row)">
                    </el-button>
                    <el-popconfirm title="确定删除吗?" confirm-button-text="确定" cancel-button-text="再想想"
                        @confirm="confirmEvent(scope.$index, scope.row)" @cancel="cancelEvent">
                        <template #reference>
                            <el-button type="danger" :icon="Delete" circle>
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[100, 200, 300, 400]" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        <!-- 编辑对话框 -->
        <Up></Up>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
    Delete, Edit
} from '@element-plus/icons-vue'
import Up from "../../components/ProductDialog.vue";
import { useStore } from "vuex"
import { useRouter } from 'vue-router';
import { shopList, delShopList } from "../../api/api";


const value = ref('')
const input = ref('')

const options = ref([
    {
        value: '显卡',
        label: '显卡',
    },
    {
        value: 'cpu',
        label: 'cpu',
    },
    {
        value: '键盘',
        label: '键盘',
    },
    {
        value: '口红',
        label: '口红',
    },
    {
        value: '家电',
        label: '家电',
    },
])

// 表格的接口数据约束
interface User {
    _id: string
    shopImg: string
    shopName: string
    shopPrice: string
}

const currentPage = ref(1)
const pageSize = ref(10)
const background = ref(true)

// 每页显示个数
const handleSizeChange = (val: number) => {
    pageSize.value = val
}
// 页码
const handleCurrentChange = (val: number) => {
    currentPage.value = val
}

let store = useStore()
// 修改当前信息
const handleEdit = (index: number, row: User) => {
    console.log(index, row)
    store.commit("SET_DIALOG", row)
}
// 删除当前信息
const confirmEvent = async (index: number, row: User) => {
    // console.log(index, row)
    let data = {
        shopId: row._id
    }
    await delShopList(data)
    getList()
}

// 取消
const cancelEvent = () => {
    return
}

const tableData = ref<User[]>([])

// 跳转到添加商品页面
const router = useRouter()
const add = () => {
    router.push('/addproduct')
}

const getList = async () => {
    let res = await shopList()
    console.log(res.data.data);
    tableData.value = res.data.data
}

onMounted(() => {
    getList()
})
</script>

<style lang="scss" scoped>
.el-pagination {
    float: right;
    margin-top: 10px;
}
</style>